<template>
	<view class="tn-safe-area-inset-bottom">
    <!-- 图片转动漫 -->
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
		
    <template v-if="show == 1">
    <view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      			
			<!-- 口罩的编码开始 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-ticket" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">口罩编码 *</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey">
					<text class="tn-padding-xs">风格为口罩类型生效</text>
					<text class="tn-icon-ticket"></text>
				</view>
			</view>
			
			<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
				<picker @change="bindPickerChange1" :value="maskId" :range="array1">
					<view class="tn-flex tn-flex-row-between">
						<view class="justify-content-item">
							<!-- <view class="tn-text-bold tn-text-lg">
								口罩编码
							</view> -->
							<view class="tn-color-gray tn-padding-top-xs">
								{{array1[maskId]}}
							</view>
						</view>
						<view class="justify-content-item tn-text-lg tn-color-grey">
							<view class="tn-icon-right tn-padding-top"></view>
						</view>
					</view>
				</picker>
			</view>
			<!-- 口罩的编码束 -->
      
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
        <view class="tn-flex justify-content-item">
          <view class="tn-bg-black tn-color-white tn-text-center" style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
            <text class="tn-icon-image" style="font-size: 30rpx;"></text>
          </view>
          <view class="tn-text-lg tn-padding-right-xs tn-text-bold">上传参考图 *</view>
        </view>
        <view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
          <text class="tn-padding-xs">清空上传</text>
          <text class="tn-icon-delete"></text>
        </view>
      </view>
      
      
      
      
      <view class="tn-margin-left tn-padding-top-xs">
        <tn-image-upload-drag
          ref="imageUpload"
          :action="action"
          :width="710"
          :height="360"
          :formData="formData"
          :fileList="fileList"
          :disabled="disabled"
          :autoUpload="autoUpload"
          :maxCount="maxCount"
          :showUploadList="showUploadList"
          :showProgress="showProgress"
          :deleteable="deleteable"
          :customBtn="customBtn"
          @sort-list="onSortList"
					:header="header"
        />

      </view>
     
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-lg tn-margin">
        <view class="tn-flex justify-content-item">
          <view class="tn-bg-black tn-color-white tn-text-center" style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
            <text class="tn-icon-science" style="font-size: 30rpx;"></text>
          </view>
          <view class="tn-text-lg tn-padding-right-xs tn-text-bold">漫画风格</view>
        </view>
        <view class="justify-content-item tn-text-df tn-color-grey">
          <text class="tn-padding-xs">单选</text>
          <text class="tn-icon-constellation"></text>
        </view>
      </view>
      
      <view class="tn-tag-content tn-margin tn-text-justify">
        <view v-for="(item, index) in artist" :key="index" class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[item.select ? `tn-bg-${item.color}--light tn-color-${item.color}` : 'tn-bg-gray--light tn-color-gray--dark']"  @click="handleArtistClick(index)">
          <text :class="['tn-padding-right-xs tn-icon-' + item.icon]"></text> {{ item.title }}
        </view>
      </view>
      
      <!-- 悬浮按钮-->
      <view class="tn-flex tn-footerfixed">
        <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
          <tn-button backgroundColor="#fbbd12" padding="40rpx 0" width="70%" fontBold @click="submitUpload">
            <!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
            <text class="tn-color-white">创 作 生 成</text>
            <!-- <text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text> -->
          </tn-button>
          <view class="tn-padding-xs tn-text-sm">
            <text class="tn-icon-tip-fill tn-color-gray tn-padding-right-xs"></text> 
            <text class="tn-color-gray">消耗 -200 积分</text>
          </view>
        </view>
      </view>
      
    </view>
     </template>
    <view class='tn-tabbar-height'></view>
    
	</view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import { configState } from "@/utils/api/sys.js"
import { authorState } from "@/utils/api/author.js"
import { baiduImageProcess } from "@/utils/api/ai.js"
export default {
  name: "TemplateCreate",
  mixins: [template_page_mixin],
  data() {
    return {
      artist: [
        {
          icon: "light",
          title: "二次元动漫图",
          color: "green",
          select: true,
					value: "anime",
        },
				{
				  icon: "light",
				  title: "戴口罩的二次元动漫人像",
				  color: "green",
				  select: false,
					value: "anime_mask"
				},
      ],
      action: getApp().globalData.baseUrl + "author/file/upload",
      formData: {},
      header: {
      	Authorization: 'Bearer ' + uni.getStorageSync("login"),
      },
      fileList: [
        {
          url: "http://qiniucloud.qqdeveloper.com/8b4d68a115131715ba145557a92aa291.jpg",
        },
      ],
      showUploadList: true,
      customBtn: false,
      autoUpload: true,
      showProgress: false,
      deleteable: true,
      customStyle: false,
      maxCount: 1,
      disabled: false,
      show: 2,
			array1: [1, 2, 3, 4, 5, 6, 7, 8],
			artistValue: "anime",
			maskId: 0,
			downLoadUrl: "",
    };
  },
  onLoad() {},
  onShow() {
    this.getSysState()
  },
  methods: {
    getSysState () {
      configState({key: "wechat_mini_state"}).then(res => {
        this.show = res.val
        if (res.val == 1) {
          this.getAuthorState()
        }
      })
    },
		getAuthorState() {
			authorState().then(res => {
					if (res.code == 1) {
						if (res.info.audit_status == 3) {
							this.$func.showToast("认证审核中 请耐心等待")
							this.accountStae = false
							return
						}
						if (res.info.audit_status == 2) {
							this.accountStae = false
							uni.showModal({
								title: '认证提示',
								content: "认证已驳回 请重新认证",
								cancelText: "暂不认证",
								confirmText: "重新认证",
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pageA/author/ident"
										})
									}
								}
							})
							return
						}
						if (res.info.is_forbidden == 1) {
							this.accountStae = false
							uni.showModal({
								title: '账号提示',
								content: "账号被禁用 联系客服",
								cancelText: "暂无联系",
								confirmText: "立即联系",
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pageA/help/help"
										})
									}
								}
							})
							return
						}
					} else {
						uni.showModal({
							title: '认证提示',
							content: "未认证 请先认证",
							cancelText: "暂不认证",
							confirmText: "立即认证",
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pageA/author/ident"
									})
								}
							}
						})
					}
			})
		},
    // 漫画风格选择
    handleArtistClick(index) {
			this.artistValue = this.artist[index].value
			// 清除已选中的所有标签
			for (var i = 0; i < this.artist.length; i++) {
				this.artist[i].select = false
			}
			this.artist[index].select = !this.artist[index].select
    },
    // 选择口罩编码
		bindPickerChange1(e) {
			this.maskId = e.detail.value
		},
		// 提交数据
		submitUpload() {
			if (this.downLoadUrl != "") {
				this.$func.downloadImage(this.downLoadUrl)
				return
			}
			let imageUrl = "";
			let file = this.$refs.imageUpload.lists
			for (let i = 0; i < file.length; i++) {
				if (file[i].data.response == undefined) {
					break
				}
				imageUrl = file[i].data.response.data.url
			}
			if (imageUrl == "") {
				this.$func.showToast("请上传参照图")
				return
			}
			uni.showLoading({
				title: "漫画转换中",
				mask: true,
			})
			baiduImageProcess({
				maskId: this.array1[this.maskId],
				artistValue: this.artistValue,
				imageUrl: imageUrl
			}).then(res => {
				let _that = this
				uni.hideLoading()
				if (res.code == 0) {
					uni.showModal({
						title: "漫画下载提示",
						content: "是否下载到本地",
						confirmText: "立即下载",
						cancelText: "暂不下载",
						success: function (re) {
							if (re.confirm) {
								_that.downLoadUrl = res.url
								_that.$func.downloadImage(res.url)
							}
						}
					})
					return
				}
				this.$func.showToast(res.msg)
			})
		},
    // 手动上传文件
    upload() {
      this.$refs.imageUpload.upload();
    },
    // 手动清空列表
    clear() {
      this.$refs.imageUpload.clear();
    },
    // 图片拖拽重新排序
    onSortList(list) {
      console.log(list);
    },
  },
};
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #ffffff;
  }
}

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 180rpx;
  height: calc(220rpx + env(safe-area-inset-bottom) / 2);
  height: calc(220rpx + constant(safe-area-inset-bottom));
}
.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}
/* 底部悬浮按钮 end*/

/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 45rpx;
    padding: 10rpx 30rpx;
    margin: 20rpx 20rpx 5rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}
/* 标签内容 end*/
</style>
